<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body {
    background-color: #f5f5f5;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    height: 100vh;
  }

  #registerForm {
    width: 400px;
    height: 300px;
    border: 1px solid gray;
    border: 0;
    outline: 0;
    box-shadow: 0 0 10px rgb(0, 0, 0, 0.3);
    margin: 200px auto;
    border-radius: 10px;

  }

  .left {
    width: 50%;
    height: 100%;
    transform-origin: right top;
    /* 设置变换的原点在左上角 */
    transform: skewX(-20deg);
    /* 在垂直方向上倾斜20度 */
    background-color: black;
    background-image: url(image/注册.png);
    

  }

  .right {
    margin-right: 150px;
    margin-top: 40px;
  }

  h1 {
    /* margin-top:15px; */
    font-family: 仿宋;
    text-align: center;
    vertical-align: top;

  }

  #registerForm {
    text-align: center;
    vertical-align: top;
  }

  #registerForm input {
    margin-top: 20px;
    width: 200px;
    height: 30px;
    border: 0;
    outline: 0;
    border-radius: 10px;
    margin-left: 30px;


  }

  .sub {
    width: 100px;
    height: 40px;
    margin-left: 30px;
    margin-top: 20px;
    border-radius: 10px;
    border: 0;
    outline: 0;
    background-color: #007BFF;
    color: white;
    font-size: 15px;
  }

  .sub:active {
    font-size: 20px;
  }
</style>

<body>
  <div class="left"></div>
  <div class="right">
    <form id="registerForm" >
      <h1>注册</h1>
      用户名:<input type="text" id="username" placeholder="Username" required><br>
      密码:<input type="password" id="password" placeholder="Password" required><br>
      <!-- <input type="email" id="email" placeholder="Email" required><br> -->
      <button type="submit" class="sub">注册</button>
      <!-- <div id="message"></div> -->
    </form>


  </div>

  <script>
    document.getElementById('registerForm').addEventListener('submit', function (event) {
      event.preventDefault(); // 阻止表单默认提交行为  

      // 收集表单数据  
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      // const email = document.getElementById('email').value;
      //const Url='http://hmajax.itheima.net/api/register'
      // 准备发送到API的数据  
      let data = {
        username: username,
        password: password,
        //email: '2940859048@qq.com'
      };

      // 发送POST请求到API  
      fetch('http://hmajax.itheima.net/api/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data) // 将数据转换为JSON字符串 

      })
        .then(response => {
          if (!response.ok) {
            //throw new Error('注册失败');
            alert('该账号已注册，请重新输入！')
          } else {
            // 解析响应体为JSON  
            return response.json();
          }
        })
        .then(result => {
          // 处理成功响应  

          if (result.message === '注册成功') {
            alert('注册成功！前往登录页面')
            window.location.href = "login.html";
          } else {
            alert(`${result.message},请重新输入`);
            return
          }


        })
        .catch(error => {
          // 处理错误响应  
          console.log('该账号已存在，请重新输入！');
        });
    });
  </script>
</body>

</html>